<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload</title>

</head>
<body>
<div id="container">
    <form action="/upavatar" method="post"
          enctype="multipart/form-data"
          id="fileform"
            >

        <input type="file" name="file" id="file">
        <input type="button" @click="up" value="上传">
    </form>

    <img id="photo" src="img/dui.png" width="100px" height="100px">
    <br>
    <!--显示所有图片-->
    <template v-for="v in list">
        <img :src="'img/'+v" width="100px" height="100px" style="margin-left: 10px;margin-top: 10px">
        <label>{{v}}</label>
        <a :href="'/downavatar?file='+v">下载</a>
    </template>







</div>
</body>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#container",
        data:{
            list:[],
        },
        created:function (){
            //查询服务器所有图片
            axios({
                url: "/list",
                method:"get",
            }).then((res)=>{
                this.list=res.data;
                console.log(this.list);
            });

        },

        methods:{
            //根据文件filename下载
            down:function (v){
              axios({
                  url:"/downavatar",
                  method:"get",
                  params:{
                      file:v,
                  }

              })
            },
            up:function (){
                console.log(new FormData($("#fileform")[0]));
              axios({
                  method:"post",
                  url:"/upavatar",
                  data: new FormData($("#fileform")[0])
              }).then((res)=>{
                  $("#photo").attr("src",res.data);
                  console.log(".."+res.data)
                  window.location.reload();

              });

            },
        }
    });





</script>
</html>